<template>
  <div id="main">
    <BaseReturnHomePage/>
    <div id="loginBox" ref="loginForm" class="animate__animated animate__rotateInDownLeft">
      <!--      logo区域  -->

      <div id="logo">
        <img height="56px" src="https://www.giaott.com/images/2022/09/28/jILo7.png" alt="">
      </div>

      <!--      注册账号-->
      <div style="display: flex;justify-content: space-between;font-size: 20px;margin: 30px 29px;">
        <span>登录</span><span>还没有账号?<router-link  style="text-decoration: none" to="/register" @click="exitAnime">&nbsp立即注册!</router-link></span>
      </div>
      <!--      账户名密码-->
      <div id="contentPanel" style="padding: 0 27px;width:458px">
        <!--      用户名-->
        <el-input v-model="loginForm.username" style="height: 46px" prefix-icon="el-icon-message" placeholder="请输入用户名/电子邮箱"/>
        <!--        密码-->
        <el-input v-model="loginForm.password" show-password prefix-icon="el-icon-lock" placeholder="请输入密码"
                  style="margin-top: 25px;height: 46px"/>
        <!--        人机验证-->
        <div id="robotVer" style="text-align: center;background-color: rgb(245, 245, 245)">
          <img src="../assets/icon/rabbit.gif" alt="gif"/>
          点击进行人机验证
          <Vcode :show="showCode"
                 failText="验证失败,请重新验证"
                 @success="success"
                 @close="close"/>
        </div>
        <div id="rememberMe">
          <span>
             <el-checkbox v-model="rememberMe">记住密码?</el-checkbox>
          </span>
          <span>
            忘记密码?
          </span>
        </div>
        <!--        登录按钮-->
        <div>
          <el-button @click="validForm" type="success" plain style="font-size: 20px;height:50px;width:100%">登录
          </el-button>
        </div>
        <!--        第三方账号登录-->
        <div style="display: flex;justify-content: space-between;align-items: center">
          <span>第三方登录</span>
          <img height="30" src="../assets/icon/彩色/QQ.png" alt="qq登录">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
#robotVer{
  text-align: center;
  font-size: 14px;
  color: #666;
  line-height: 38px;
  background-color: #eee;
  background-image: -o-linear-gradient(top,#fff 0,#f3f3f3 100%);
  background-image: linear-gradient(180deg,#fff,#f3f3f3);
  border: 1px solid #dcdfe6;
  opacity: 0.4;
  border-radius: 2px;
  user-select: none;
}
#robotVer:hover{
  opacity: 0.9;
}

#heart {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 12px;
  background-color: red;
}

/deep/ .el-input__inner {
  height: 46px;
  border: 1px solid #1296db;
  background-color: rgb(230, 245, 254);
}

#rememberMe {
  display: flex;
  justify-content: space-between;
}

#contentPanel div {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-top: 25px;
  font-size: 19px;

}

#logo img {
  margin-top: 31px;
  margin-left: 140px;
}

#loginBox {
  position: absolute;
  top: 8%;
  left: 37%;
  width: 508px;
  height: 704px;

  background-color: white;
  box-shadow: 2px 2px 3px #aaaaaa;;
  border-radius: 15px;

}


#main {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 15px;
}

#main::before {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  background-image: url("../assets/bgi/login.jpg");
  background-size: cover;
  background-attachment: fixed;
  filter: blur(15px);
}

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}



</style>
<script>
import Vcode from "vue-puzzle-vcode";
import BaseReturnHomePage from "@//components/base/BaseReturnHomePage";
import {loginRequest} from "@//assets/http/request";

export default {
  name: "login",
  components: {BaseReturnHomePage, Vcode},
  data() {
    return {
      showCode: false,
      rememberMe: '',
      username: '',
      password: '',
      loginForm: {
        // 账户数据
        username: '',
        // 密码数据
        password: '',
        // 记住密码
        remember: false,
      },
    }
  },
  methods: {
    success() {
      loginRequest(this.loginForm);
      this.showCode = false;
    },
    close() {
      this.showCode = false;
    },
    validForm() {
      if (this.loginForm.length < 1 || this.loginForm.password.length < 1) {
        this.$message({
          type:"warning",
          message:'用户名密码不能为空'
        })
      }else{
        this.showCode = !this.showCode;
      }
    }
  }
}
</script>

